<template> 
  <div class="detail-container">
    <el-dialog title="评价" :visible.sync="commentDialogVisible" width="30%" @close="closeComment" destroy-on-close
               append-to-body>
      <Comment :productId="productId" :memberId="memberId"></Comment>
    </el-dialog>
    <el-dialog title="退货" :visible.sync="returnApplyDialogVisible" width="30%" @close="closeReturnApply" destroy-on-close
               append-to-body>
      <ReturnApply :productId="productId" :memberId="memberId" :orderId="id"></ReturnApply>
    </el-dialog>
    <el-dialog title="支付" :visible.sync="payDialogVisible" width="30%" @close="closePay" destroy-on-close
               append-to-body>
      <Pay :totalAmount="totalAmount" :orderId="id"></Pay>
    </el-dialog>

    <div>
      <el-steps :active="formatStepStatus(order.status)" finish-status="success" align-center>
        <el-step title="提交订单" :description="formatTime(order.createTime)"></el-step>
        <el-step title="支付订单" :description="formatTime(order.paymentTime)"></el-step>
        <el-step title="平台发货" :description="formatTime(order.deliveryTime)"></el-step>
        <el-step title="确认收货" :description="formatTime(order.receiveTime)"></el-step>
        <el-step title="完成评价" :description="formatTime(order.commentTime)"></el-step>
      </el-steps>
    </div>
    <el-card shadow="never" style="margin-top: 15px">
      <div class="operate-container">
        <i class="el-icon-warning color-danger" style="margin-left: 20px"></i>
        <span class="color-danger">当前订单状态：{{ order.status | formatStatus }}</span>
        <div class="operate-button-container" v-show="order.status===0">
          <el-button size="mini" @click="pay" type="primary">支付订单</el-button>
        </div>
        <div class="operate-button-container" v-show="order.status===1">
          <el-button size="mini" @click="showUpdateReceiverDialog">修改收货人信息</el-button>
        </div>
        <div class="operate-button-container" v-show="order.status===2">
          <el-button size="mini" @click="updateConfirmStatus">确认收货</el-button>
        </div>
      </div>
      <div style="margin-top: 20px">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">基本信息</span>
      </div>
      <div class="table-layout">
        <el-row>
          <el-col :span="8" class="table-cell-title">订单编号</el-col>
          <el-col :span="8" class="table-cell-title">用户账号</el-col>
          <el-col :span="8" class="table-cell-title">支付方式</el-col>
        </el-row>
        <el-row>
          <el-col :span="8" class="table-cell">{{ order.orderSn }}</el-col>
          <el-col :span="8" class="table-cell">{{ order.memberUsername }}</el-col>
          <el-col :span="8" class="table-cell">{{ order.payType | formatPayType }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="8" class="table-cell-title">配送方式</el-col>
          <el-col :span="8" class="table-cell-title">物流单号</el-col>
          <!--          <el-col :span="4" class="table-cell-title">订单可得优币</el-col>-->
          <!--          <el-col :span="4" class="table-cell-title">订单可得成长值</el-col>-->
          <el-col :span="8" class="table-cell-title">活动信息</el-col>
        </el-row>
        <el-row>
          <el-col :span="8" class="table-cell">{{ order.deliveryCompany | formatNull }}</el-col>
          <el-col :span="8" class="table-cell">{{ order.deliverySn | formatNull }}</el-col>
          <!--          <el-col :span="4" class="table-cell">{{order.integration}}</el-col>-->
          <!--          <el-col :span="4" class="table-cell">{{order.growth}}</el-col>-->
          <el-col :span="8" class="table-cell">
            <el-popover
                placement="top-start"
                title="活动信息"
                width="200"
                trigger="hover"
                :content="order.promotionInfo">
              <span slot="reference">{{ order.promotionInfo | formatLongText }}</span>
            </el-popover>
          </el-col>
        </el-row>
      </div>
      <div style="margin-top: 20px">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">收货人信息</span>
      </div>
      <div class="table-layout">
        <el-row>
          <el-col :span="6" class="table-cell-title">收货人</el-col>
          <el-col :span="6" class="table-cell-title">手机号码</el-col>
          <el-col :span="6" class="table-cell-title">邮政编码</el-col>
          <el-col :span="6" class="table-cell-title">收货地址</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="table-cell">{{ order.receiverName }}</el-col>
          <el-col :span="6" class="table-cell">{{ order.receiverPhone }}</el-col>
          <el-col :span="6" class="table-cell">{{ order.receiverPostCode }}</el-col>
          <el-col :span="6" class="table-cell">{{ order | formatAddress }}</el-col>
        </el-row>
      </div>
      <div style="margin-top: 20px">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">商品信息</span>
      </div>
      <el-table
          ref="orderItemTable"
          :data="order.orderItemList"
          style="width: 100%;margin-top: 20px" border>
        <el-table-column label="商品图片" width="120" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.productPic" style="height: 80px">
          </template>
        </el-table-column>
        <el-table-column label="商品名称" align="center">
          <template slot-scope="scope">
            <p>{{ scope.row.productName }}</p>
            <p>品牌：{{ scope.row.productBrand }}</p>
          </template>
        </el-table-column>
        <el-table-column label="价格/货号" width="120" align="center">
          <template slot-scope="scope">
            <p>价格：￥{{ scope.row.productPrice }}</p>
            <p>货号：{{ scope.row.productSn }}</p>
          </template>
        </el-table-column>
        <el-table-column label="属性" width="120" align="center">
          <template slot-scope="scope">
            {{ scope.row.spData | formatProductAttr }}
          </template>
        </el-table-column>
        <el-table-column label="数量" width="120" align="center">
          <template slot-scope="scope">
            {{ scope.row.productQuantity }}
          </template>
        </el-table-column>
        <el-table-column label="小计" width="120" align="center">
          <template slot-scope="scope">
            ￥{{ scope.row.productPrice * scope.row.productQuantity }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="comment(scope.row)" v-if="order.status===3">评价</el-button>
            <el-button type="text" size="mini" @click="returnApply(scope.row)" v-if="order.status===3"
                       style="color: gray">退货
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="float: right;margin: 20px">
        合计：<span class="color-danger">￥{{ order.totalAmount }}</span>
      </div>
      <div style="margin-top: 60px">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">费用信息</span>
      </div>
      <div class="table-layout">
        <el-row>
          <el-col :span="8" class="table-cell-title">商品合计</el-col>
          <el-col :span="8" class="table-cell-title">运费</el-col>
          <el-col :span="8" class="table-cell-title">优惠券</el-col>
          <!--          <el-col :span="6" class="table-cell-title">积分抵扣</el-col>-->
        </el-row>
        <el-row>
          <el-col :span="8" class="table-cell">￥{{ order.totalAmount }}</el-col>
          <el-col :span="8" class="table-cell">￥{{ order.freightAmount }}</el-col>
          <el-col :span="8" class="table-cell">-￥{{ order.couponAmount }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="8" class="table-cell-title">折扣金额</el-col>
          <el-col :span="8" class="table-cell-title">订单总金额</el-col>
          <el-col :span="8" class="table-cell-title">应付款金额</el-col>
        </el-row>
        <el-row>
          <el-col :span="8" class="table-cell">-￥{{ order.discountAmount }}</el-col>
          <el-col :span="8" class="table-cell">
            <span class="color-danger">￥{{ order.totalAmount + order.freightAmount }}</span>
          </el-col>
          <el-col :span="8" class="table-cell">
            <span class="color-danger">￥{{ order.payAmount + order.freightAmount - order.discountAmount }}</span>
          </el-col>
        </el-row>
      </div>
      <!--      <div style="margin-top: 20px">-->
      <!--        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>-->
      <!--        <span class="font-small">操作信息</span>-->
      <!--      </div>-->
      <!--      <el-table style="margin-top: 20px;width: 100%"-->
      <!--                ref="orderHistoryTable"-->
      <!--                :data="order.historyList" border>-->
      <!--        <el-table-column label="操作者"  width="120" align="center">-->
      <!--          <template slot-scope="scope">-->
      <!--            {{scope.row.operateMan}}-->
      <!--          </template>-->
      <!--        </el-table-column>-->
      <!--        <el-table-column label="操作时间"  width="160" align="center">-->
      <!--          <template slot-scope="scope">-->
      <!--            {{formatTime(scope.row.createTime)}}-->
      <!--          </template>-->
      <!--        </el-table-column>-->
      <!--        <el-table-column label="订单状态"  width="120" align="center">-->
      <!--          <template slot-scope="scope">-->
      <!--            {{scope.row.orderStatus | formatStatus}}-->
      <!--          </template>-->
      <!--        </el-table-column>-->
      <!--        <el-table-column label="付款状态"  width="120" align="center">-->
      <!--          <template slot-scope="scope">-->
      <!--            {{scope.row.orderStatus | formatPayStatus}}-->
      <!--          </template>-->
      <!--        </el-table-column>-->
      <!--        <el-table-column label="发货状态"  width="120" align="center">-->
      <!--          <template slot-scope="scope">-->
      <!--            {{scope.row.orderStatus | formatDeliverStatus}}-->
      <!--          </template>-->
      <!--        </el-table-column>-->
      <!--        <el-table-column label="备注" align="center">-->
      <!--          <template slot-scope="scope">-->
      <!--            {{scope.row.note}}-->
      <!--          </template>-->
      <!--        </el-table-column>-->
      <!--      </el-table>-->
    </el-card>
    <el-dialog title="修改收货人信息"
               :visible.sync="receiverDialogVisible"
               width="40%" append-to-body>
      <el-form :model="receiverInfo"
               ref="receiverInfoForm"
               label-width="150px">
        <el-form-item label="收货人姓名：">
          <el-input v-model="receiverInfo.receiverName" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="手机号码：">
          <el-input v-model="receiverInfo.receiverPhone" style="width: 200px">
          </el-input>
        </el-form-item>
        <el-form-item label="邮政编码：">
          <el-input v-model="receiverInfo.receiverPostCode" style="width: 200px">
          </el-input>
        </el-form-item>
        <el-form-item label="所在区域：">
          <v-distpicker :province="receiverInfo.receiverProvince"
                        :city="receiverInfo.receiverCity"
                        :area="receiverInfo.receiverRegion"
                        @selected="onSelectRegion"></v-distpicker>
        </el-form-item>
        <el-form-item label="详细地址：">
          <el-input v-model="receiverInfo.receiverDetailAddress" type="textarea" rows="3">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="receiverDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleUpdateReceiverInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  closeOrder,
  confirm,
  deleteOrder,
  getOrderDetail,
  updateMoneyInfo,
  updateOrderNote,
  updateReceiverInfo
} from '@/api/order';
import {formatDate} from '@/utils/date';
import VDistpicker from 'v-distpicker';
import Comment from "@/views/front/Comment";
import ReturnApply from "@/views/front/ReturnApply";
import Pay from "@/views/front/Pay";

const defaultReceiverInfo = {
  orderId: null,
  receiverName: null,
  receiverPhone: null,
  receiverPostCode: null,
  receiverDetailAddress: null,
  receiverProvince: null,
  receiverCity: null,
  receiverRegion: null,
  status: null
};
export default {
  name: 'orderDetail',
  components: {ReturnApply, VDistpicker, Comment,Pay},
  props: {
    id: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      order: {},
      receiverDialogVisible: false,
      receiverInfo: Object.assign({}, defaultReceiverInfo),
      moneyDialogVisible: false,
      moneyInfo: {orderId: null, freightAmount: 0, discountAmount: 0, status: null},
      messageDialogVisible: false,
      message: {title: null, content: null},
      closeDialogVisible: false,
      closeInfo: {note: null, id: null},
      markOrderDialogVisible: false,
      markInfo: {note: null},
      commentDialogVisible: false,
      returnApplyDialogVisible: false,
      payDialogVisible: false,
      memberId: null,
      productId: null,
      totalAmount: 0,
    }
  },
  watch: {
    id: {
      handler(val) {
        getOrderDetail(val).then(response => {
          this.order = response.data;
        });
      },
      immediate: true
    }
  },

  filters: {
    formatNull(value) {
      if (value === undefined || value === null || value === '') {
        return '暂无';
      } else {
        return value;
      }
    },
    formatLongText(value) {
      if (value === undefined || value === null || value === '') {
        return '暂无';
      } else if (value.length > 8) {
        return value.substr(0, 8) + '...';
      } else {
        return value;
      }
    },
    formatPayType(value) {
      if (value === 1) {
        return '支付宝';
      } else if (value === 2) {
        return '微信';
      } else {
        return '未支付';
      }
    },
    formatSourceType(value) {
      if (value === 1) {
        return 'APP订单';
      } else {
        return 'PC订单';
      }
    },
    formatOrderType(value) {
      if (value === 1) {
        return '秒杀订单';
      } else {
        return '正常订单';
      }
    },
    formatAddress(order) {
      let str = order.receiverProvince;
      if (order.receiverCity != null) {
        str += "  " + order.receiverCity;
      }
      str += "  " + order.receiverRegion;
      str += "  " + order.receiverDetailAddress;
      return str;
    },
    formatStatus(value) {
      if (value === 1) {
        return '待发货';
      } else if (value === 2) {
        return '已发货';
      } else if (value === 3) {
        return '已完成';
      } else if (value === 4) {
        return '已关闭';
      } else if (value === 5) {
        return '无效订单';
      } else {
        return '待付款';
      }
    },
    formatPayStatus(value) {
      if (value === 0) {
        return '未支付';
      } else if (value === 4) {
        return '已退款';
      } else {
        return '已支付';
      }
    },
    formatDeliverStatus(value) {
      if (value === 0 || value === 1) {
        return '未发货';
      } else {
        return '已发货';
      }
    },
    formatProductAttr(value) {
      if (value == null) {
        return '';
      } else {
        let attr = JSON.parse(value);
        let result = '';
        for (let i = 0; i < attr.length; i++) {
          result += attr[i].key;
          result += ":";
          result += attr[i].value;
          result += ";";
        }
        return result;
      }
    }
  },
  methods: {
    onSelectRegion(data) {
      this.receiverInfo.receiverProvince = data.province.value;
      this.receiverInfo.receiverCity = data.city.value;
      this.receiverInfo.receiverRegion = data.area.value;
    },
    formatTime(time) {
      if (time == null || time === '') {
        return '';
      }
      let date = new Date(time);
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    },
    formatStepStatus(value) {
      if (value === 1) {
        //待发货
        return 2;
      } else if (value === 2) {
        //已发货
        return 3;
      } else if (value === 3) {
        //已完成
        return 4;
      } else {
        //待付款、已关闭、无限订单
        return 1;
      }
    },
    showUpdateReceiverDialog() {
      this.receiverDialogVisible = true;
      this.receiverInfo = {
        orderId: this.order.id,
        receiverName: this.order.receiverName,
        receiverPhone: this.order.receiverPhone,
        receiverPostCode: this.order.receiverPostCode,
        receiverDetailAddress: this.order.receiverDetailAddress,
        receiverProvince: this.order.receiverProvince,
        receiverCity: this.order.receiverCity,
        receiverRegion: this.order.receiverRegion,
        status: this.order.status
      }
    },
    handleUpdateReceiverInfo() {
      this.$confirm('是否要修改收货信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateReceiverInfo(this.receiverInfo).then(response => {
          this.receiverDialogVisible = false;
          this.$message({
            type: 'success',
            message: '修改成功!'
          });
          getOrderDetail(this.id).then(response => {
            this.order = response.data;
          });
        });
      });
    },
    showUpdateMoneyDialog() {
      this.moneyDialogVisible = true;
      this.moneyInfo.orderId = this.order.id;
      this.moneyInfo.freightAmount = this.order.freightAmount;
      this.moneyInfo.discountAmount = this.order.discountAmount;
      this.moneyInfo.status = this.order.status;
    },
    handleUpdateMoneyInfo() {
      this.$confirm('是否要修改费用信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateMoneyInfo(this.moneyInfo).then(response => {
          this.moneyDialogVisible = false;
          this.$message({
            type: 'success',
            message: '修改成功!'
          });
          getOrderDetail(this.id).then(response => {
            this.order = response.data;
          });
        });
      });
    },
    showMessageDialog() {
      this.messageDialogVisible = true;
      this.message.title = null;
      this.message.content = null;
    },
    handleSendMessage() {
      this.$confirm('是否要发送站内信?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.messageDialogVisible = false;
        this.$message({
          type: 'success',
          message: '发送成功!'
        });
      });
    },
    showCloseOrderDialog() {
      this.closeDialogVisible = true;
      this.closeInfo.note = null;
      this.closeInfo.id = this.id;
    },
    handleCloseOrder() {
      this.$confirm('是否要关闭?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = new URLSearchParams();
        params.append("ids", [this.closeInfo.id]);
        params.append("note", this.closeInfo.note);
        closeOrder(params).then(response => {
          this.closeDialogVisible = false;
          this.$message({
            type: 'success',
            message: '订单关闭成功!'
          });
          getOrderDetail(this.id).then(response => {
            this.order = response.data;
          });
        });
      });
    },
    showMarkOrderDialog() {
      this.markOrderDialogVisible = true;
      this.markInfo.id = this.id;
      this.closeOrder.note = null;
    },
    handleMarkOrder() {
      this.$confirm('是否要备注订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = new URLSearchParams();
        params.append("id", this.markInfo.id);
        params.append("note", this.markInfo.note);
        params.append("status", this.order.status);
        updateOrderNote(params).then(response => {
          this.markOrderDialogVisible = false;
          this.$message({
            type: 'success',
            message: '订单备注成功!'
          });
          getOrderDetail(this.id).then(response => {
            this.order = response.data;
          });
        });
      });
    },
    handleDeleteOrder() {
      this.$confirm('是否要进行该删除操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = new URLSearchParams();
        params.append("ids", [this.id]);
        deleteOrder(params).then(response => {
          this.$message({
            message: '删除成功！',
            type: 'success',
            duration: 1000
          });
        });
      })
    },
    pay() {
      //TODO 支付模块跳转
      this.totalAmount = this.order.totalAmount;
      this.payDialogVisible = true;
    },
    comment(row) {
      this.productId = row.productId;
      this.memberId = 1;
      this.commentDialogVisible = true;
    },
    returnApply(row) {
      this.productId = row.productId;
      this.memberId = 1;
      this.returnApplyDialogVisible = true;
    },
    updateConfirmStatus() {
      //TODO 确认收货
      confirm(this.id).then(response => {
        this.$message({
          type: 'success',
          message: '确认收货成功!'
        });
        getOrderDetail(this.id).then(response => {
          this.order = response.data;
        });
      });
    },
    closeComment() {
      this.commentDialogVisible = false;
    },
    closeReturnApply() {
      this.returnApplyDialogVisible = false;
    },
    closePay() {
      this.payDialogVisible = false;
    }
  }
}
</script>
<style scoped>
.detail-container {
  width: 80%;
  padding: 20px 20px 20px 20px;
  margin: 20px auto;
}

.operate-container {
  background: #F2F6FC;
  height: 80px;
  margin: -20px -20px 0;
  line-height: 80px;
}

.operate-button-container {
  float: right;
  margin-right: 20px
}

.table-layout {
  margin-top: 20px;
  border-left: 1px solid #DCDFE6;
  border-top: 1px solid #DCDFE6;
}

.table-cell {
  height: 60px;
  line-height: 40px;
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  font-size: 14px;
  color: #606266;
  text-align: center;
  overflow: hidden;
}

.table-cell-title {
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  background: #F2F6FC;
  text-align: center;
  font-size: 14px;
  color: #303133;
}
</style>


